﻿<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<script src="js/want.api.js"></script>
	<script src="js/want.domain.js"></script>

	<style type="text/css">
		.iwant_panel_div{border-right: 1px solid #EFEFEF;  float: left;  }
		/*i want to custom css*/
		.panel_functions{width: 100%; background-color: #35bdd9; }

		#iwantto_main_order_by_name{color: white; display: none; }
		.iwanto_panel_top{color:white; text-align: center; background-color: #2d9bb3; }
		.iwantto_panel_body{background-color: #35bdd9; height: 100%; }

		.iwantto_min_panel_app_icon{display:block; margin:0 auto;}
		.iwantto_min_panel_app_name_font{color:white;  text-align:center; }

		.iwantto_max_panel_app_name_font{color:white;}
		.iwantto_max_panel_app_des_font{color:white;line-height: 12px; }
		.wp_w_55_3{width: 55.3px; } .margin_020{margin: 0 20px; }
		.wp_iwantto_hand{
			 cursor:pointer;
		}
		.iwantto_go_to_app{
			background-color: #2d9bb3!important;
		}
		
		.wp_mt_ne10{
			margin-top: -10px;
		}
		.wp_iwanto_title{
			line-height: 20px;
		}
		.iwant_to_search_panel{
			width: 100%;
			background-color: #35bdd9;
		}
		#iwant_to_search_view{
			background-color: #35bdd9;
			display: none;
		}
		.iwant_to_white_font{
			color: white;
		}
		.iwant_to_input_color{
			color: black;
		}
		.wp_pb_15{
			padding-bottom: 15px;
		}
		.iwant_to_hr{height:1px;border:none;border-top:1px solid #e5e5e5;}
		#iwant_to_search_result_view{width: 100%;background-color: #35bdd9;display: none;}
		#iwant_to_search_view .k-i-calendar{display: none;}
		#iwant_to_search_view .k-select{width: 100%;}
		#iwant_to_search_result_back{color: #00ffff;text-decoration: none;}
		.highlight {color: #da4c4e }
		.text_one_line_overflow {
			  display:block;
			  word-break:keep-all;
			  white-space:nowrap;
			  overflow:hidden;
			  text-overflow:ellipsis;
			  -o-text-overflow:ellipsis
		}
		.wp_lh_20{
			line-height: 20px;
		}
		#i_want_to_alpa_search{
			overflow: hidden;
		}
		#i_want_to_alpa_search > .letter_filter{
            position: absolute;
		    left: 233px;
		    top: 45px;
		    text-align: center;
		    height:93%;
		    font-size: 14px;
        }
        #i_want_to_alpa_search > .letter_filter li{
            cursor: pointer;
            list-style: none;
            color: white;
           /* border-bottom: 1px solid #35BDD9;*/
            width: 15px;
        }
        #iwantto_tooltip_img{
        	/*width: 226px;
        	height: 40px;*/
        	position:relative;
        	display: none;
        	left: 60px;
        	top: 21px;
        	z-index : 999999999;
        }
       

       	.iwant_to_app_menu{width: 160px; right: auto;left: 0;position: relative;font-size: 12px;color: black;word-break:keep-all; margin-top: 10px;display: none;background:red; zoom:1;	z-index: 1111111111;}
        .iwant_to_app_menu li .k-state-border-down { width: 135px;background-color: #00AAFF;z-index: 1111111111;}
	    .iwant_to_app_menu li{width: 135px;background-color: white;border-bottom: 2px solid #e6e6e6 !important;}
	    .iwant_to_app_menu .k-state-hover {background-color: #00AAFF;}
	    .iwant_to_app_menu span{width: 135px;margin-left: 5px;z-index: 1111111111;}

	    .iwant_to_app_extend_menu{width: 160px; right: auto;left: 0;position: relative;font-size: 12px;color: black;word-break:keep-all; margin-top: 10px;display: none;background:red; zoom:1;	z-index: 1111111111;}
        .iwant_to_app_extend_menu li .k-state-border-down { width: 135px;background-color: #00AAFF;z-index: 1111111111;}
	    .iwant_to_app_extend_menu li{width: 135px;background-color: white;overflow:auto;border-bottom: 2px solid #e6e6e6 !important;}
	    .iwant_to_app_extend_menu .k-state-hover {background-color: #00AAFF;}
	    .iwant_to_app_extend_menu span{width: 135px;margin-left: 5px;z-index: 1111111111;}
	    #iwant_to_app_no_alpha_result{
        	position: absolute;
        	z-index: 99999999;
        	left: 18px;
        	top: 60px;
        	font-size: 14px;
        	color: white;
        	display: none;
        }
         #iwantto_search_zero_result{
        	position: absolute;
        	z-index: 99999999;
        	left: 300px;
        	top: 150px;
        	font-size: 14px;
        	color: white;
        	display: none;
        }

        #iwantto_max_panel_zero_result{
        	color: white;
        	position: absolute;
        	left:300px;
        }
        
        .panel_title_class1{
            vertical-align:top;
			text-align:center;
			left: 100px;
            position: absolute;
        }
        .panel_title_class2{
            vertical-align:top;
			text-align:center;
        }
        
	</style>
	<div class="iwant_panel_div" id="iwanto_panel">
		<div class="iwanto_panel_top wp_h_20 wp_fz_14 wp_iwanto_title">
			<span id="iwantto_title" class="panel_title_class1">I want to</span>
			<i id="iwantto_panel_resize_icon" class="main_common_f_13_13 panel_resize right wp_mr_5 wp_mt_3 wp_iwantto_hand"></i>
            <img id="iwantto_tooltip_img" src="imgs/beganAppTool.png">
		</div>
		<div class="panel_functions wp_h_30 wp_pt_10">
			<i id="iwantito_search" class="main_common_g_11_11 right wp_mr_10 wp_mt_3 wp_iwantto_hand" title="Search" onclick="wp_i_want_to.onOpenOrCloseSearchPanel()"></i>
			<span id="iwant_to_app_no_alpha_result"></span>
		</div>
		<div id="iwant_to_search_view" class="wp_w_768  wp_pb_15 left">
			<span type="text" class="left wp_ml_25 wp_fz_11 wp_mt_3 iwant_to_white_font wp_mr_10">Keywords</span>
			<span class="k-textbox wp_searchbar">
				<input id="iwant_to_search_keywords_input" style="border: 1px solid \#D8D8D8" maxlength="2000" class="left wp_ml_10 wp_h_20 wp_w_252" onkeypress="wp_i_want_to.enterSearchBtn(event)" />
				<i id="iwant_to_search_icon" class="k-icon k-i-search" title="Search"  onclick="wp_i_want_to.clickSearchIcon()"></i>
			</span>
			<hr class="iwant_to_hr wp_w_743 wp_mt_9 wp_mb_10 left">
			<div class="wp_w_768 wp_h_20 wp_mb_10 left" id="iwant_to_search_result_view">
		    	<a class=" wp_ml_25 wp_fz_12 wp_iwantto_hand" id="iwant_to_search_result_back" onclick="wp_i_want_to.clickBackToAll()">Back to all</a>
		    	<span class=" wp_fz_12 iwant_to_white_font">&nbsp;&gt;&nbsp;Showing&nbsp;<span  id="iwant_to_search_result_count"></span>&nbsp;result(s) for&nbsp;<span id="iwant_to_search_result_keywords" ></span></span>
			</div>
			<span id="iwantto_search_zero_result" class="wp_iwantto_highlight"></span>
		</div>
		<div id="i_want_to_alpa_search" data-alpa-name="iwanto_alpa_search">
			<div id="iwantto_min_panel_div"  class="iwantto_panel_body wp_pl_7 wp_pr_15"></div>
			<div id="iwantto_max_panel_div"  class="iwantto_panel_body wp_pl_25 wp_pr_25"></div>
		</div>
	</div>

	<script type="text/x-kendo-template" id="iwanto_panel_min_template">
		<div class="left wp_w_60 wp_h_65 wp_mb_20  wp_iwantto_hand" style="#: data.mid_mar # ">
			<img id="iwantto_min_image_#:data.AppId#" class="iwantto_min_panel_app_icon wp_w_40 wp_h_40 wp_iwantto_hand" onclick="wp_i_want_to.clickIwanttoIcon(this,#:data.AppId#,event)" src="#: data.Icon #">
			<div id="iwantto_min_name_#:data.AppId#" class="iwantto_min_panel_app_name_font wp_mt_10 wp_fz_12 text_one_line_overflow wp_iwantto_hand" onclick="wp_i_want_to.clickIwanttoIcon(this,#:data.AppId#,event)" title="#: data.Title #"><span>#: data.Title #</span></div>
			<ul class="iwant_to_app_menu" onmouseleave="wp_i_want_to.onMenuMouseLeave(this);"></ul>
		</div>
	</script>
	<script type="text/x-kendo-template" id="iwanto_panel_max_template">
		<div class="left wp_w_206 wp_h_42 wp_mb_20" style="#: data.mid_mar # ">
			<div class="left">
				<img id="iwantto_max_image_#:data.AppId#" class="wp_w_40 wp_h_40 wp_iwantto_hand"  src="#: data.Icon #" onclick="wp_i_want_to.clickExtendIcon(this,#:data.AppId#)">
			</div>
			<div class="left wp_w_151 wp_ml_15 wp_mt_3 iwantto_app_content_div">
				<div id="iwantto_max_name_#:data.AppId#" class="iwantto_max_panel_app_name_font wp_fz_14 wp_mt_ne6">
					<span class="wp_w_130 wp_h_20 left wp_iwantto_hand wp_iwantto_highlight text_one_line_overflow wp_lh_20" title="#: data.Title #" onclick="wp_i_want_to.clickExtendIcon(this,#:data.AppId#)">#: data.Title #</span>
					#if(data.IsBookmarked){#
						<i id="iwantto_bookmarked_#:data.AppId#" class="main_smartstream_ab_8_8 right wp_ml_10 wp_mt_6 iwantto_main_bookmark wp_iwantto_hand" onclick="wp_i_want_to.clickBookMark(this,#:data.AppId#)"></i>
					#}else{#
						<i id="iwantto_bookmark_#:data.AppId#" class="main_smartstream_ac_8_8 right wp_ml_10 wp_mt_6 iwantto_main_bookmark wp_iwantto_hand" onclick="wp_i_want_to.clickBookMark(this,#:data.AppId#)"></i>
					#}#
					<div class="clear"></div>
				 </div>
				 <div class="wp_h_24">
					<p class="iwantto_max_panel_app_des_font wp_fz_12" title="#: data.AppDescription #">#: data.AppDescription #</p>
					<ul class="iwant_to_app_extend_menu" onmouseleave="wp_i_want_to.onMenuMouseLeave(this);"></ul>
				 </div>
			</div>
		</div>
	</script>

    <script>
     var wp_i_want_to = (function() {
	     	var minPageTmpl = $('#iwantto_min_panel_div');
	        var minDataTmpl = $('#iwanto_panel_min_template');
	        var maxPageTmpl = $('#iwantto_max_panel_div');
	        var maxDataTmpl = $('#iwanto_panel_max_template');
     		var iwanto_tab_win_title="I Want To App List";
     		var alert_title="Error Message"
		    var iwanto_app_detail_title="";
		    var allAPPSOffset=0;
		    var allNewAppsStartCount=10;
		    var allNewOffset=10;
		    var letterSearchTool;
		    var oldAllAppList;
		    var newALLAppList;
		    var maxStartCount=Math.ceil((Screen.bodyHeight-$('#wp_header').height())/62*3);
		    var minStartCount=Math.ceil((Screen.bodyHeight-$('#wp_header').height())/85*3);
		    var isEndAll=false;
		    var isEndHome=false;
		    var isFirstLoad=true;
		    var homeAPPsOffset=0;
			var oldhomeAppsList;
			var newHomeAppsList;
			isShowSreachKeywordsNull=false;
			var loading;
			var useragent = Workport.getBrowser();
			function getItem(indexes, menu) {
				    var itemIndexes = indexes.split(/[.,]/);
				    var item = $(menu);
				    if (itemIndexes[0] !== "") {
				        for (var i = 0, len = itemIndexes.length; i < len; i++) {
				            item = item.children("li").eq(itemIndexes[i]);
				            if (i < len-1) {
				                item = item.find("ul:first");
				            }
				        }
				    }
					return item;
			}

			function iwantto_handel_style_of_datasource(datasource,flag,oldLength){
				if(flag=="newmin"){
					for(var i=oldLength;i<(datasource.length+oldLength);i++){
						if(i==1 ||i%3==1){
							datasource[i-oldLength].mid_mar="margin-left:23px;margin-right:23px;";
						}
					}
				}else if(flag=="newmax"){
					for(var i=oldLength;i<(datasource.length+oldLength);i++){
						if(i==1 ||i%3==1){
							datasource[i-oldLength].mid_mar="margin-left:50px;margin-right:50px;";
						}
					}
				}else{
					for(var i=0;i<datasource.length;i++){
						if(i==1 ||i%3==1){
							if(flag=="min"){
								datasource[i].mid_mar="margin-left:23px;margin-right:23px;";
							}
							if(flag=="max"){
								datasource[i].mid_mar="margin-left:50px;margin-right:50px;";
							}
						}
					}
				}
				return datasource;
			}
		    //test zoom callbacks
		    function iwantto_zoomin_cb () {
		        $('.iwant_panel_div').addClass('wp_p_max');
		        $('.iwant_panel_div').css({width:"768"});
		        wp_iwant_to_enlargeIwantoPanel();
		        $("#iwantto_main_order_by_name").css({display:"inline"});
		        $("#iwantto_panel_resize_icon").toggleClass("main_common_f_13_13 main_common_m_13_13");
		    }
		    function iwantto_zoomout_cb() {
		        $('.iwant_panel_div').removeClass('wp_p_max');
		        $('.iwant_panel_div').css({width:"256"});
		        wp_iwant_to_decreaseIwantoPanel();
		        $("#iwantto_main_order_by_name").css({display:"none"});
		        $("#iwantto_panel_resize_icon").toggleClass("main_common_f_13_13 main_common_m_13_13");  
		    }

		    function iwant_to_closeSearchPanel(){
				$("#iwant_to_search_view").hide();
				$("#iwant_to_search_result_view").hide();
				$("#iwant_to_search_keywords_input").val("");
			}

			function wp_iwant_to_enlargeIwantoPanel(){
				wp_i_want_to.render([],maxDataTmpl,maxPageTmpl);
				$('#i_want_to_alpa_search').css('width',"768");
				$('#i_want_to_alpa_search').find('ul').css("left","745px");
				letterSearchTool.update();
				letterSearchTool.cancleHighLight();
				$("#iwantto_min_panel_div").parent().hide();
				$("#iwantto_max_panel_div").parent().show();
				$("#iwantto_tooltip_img").hide();
                $("#iwantto_title").removeClass('panel_title_class1');
                $("#iwantto_title").addClass('panel_title_class2');
				$('#iwant_to_app_no_alpha_result').hide();
				wp_i_want_to.showLoading(loading,$('#iwanto_panel'),false);
				var data={ offset: 0, count: maxStartCount, orderBy:"Dummy String",filterBy:"Dummy String",mode:"Limited"};
				iwant_to_get_all_app_list(data,iwanto_get_all_apps_list_callback);
			}

			function wp_iwant_to_decreaseIwantoPanel(){
				wp_i_want_to.render([],minDataTmpl,minPageTmpl);
				$('#i_want_to_alpa_search').css('width',"256");
				$('#i_want_to_alpa_search').find('ul').css("left","233px");
				letterSearchTool.update();
				letterSearchTool.cancleHighLight();
				$("#iwantto_max_panel_div").parent().hide();
				$("#iwantto_min_panel_div").parent().show();
				$('#iwant_to_app_no_alpha_result').hide();
				iwant_to_closeSearchPanel();
				wp_i_want_to.showLoading(loading,$('#iwanto_panel'),false);
				var iwant_to_get_home_apps_url_data={ offset: 0, count: minStartCount, orderBy:"Dummy String",filterBy:"Dummy String",mode:"Limited"};
				iwant_to_get_home_app_list(iwant_to_get_home_apps_url_data,iwanto_get_home_apps_list_callback);
			}

			//---------------------------API callback function

			function iwantto_SearchAppsAPICallBack(data,httpCode){
				loading.hide();
				if(data){
					if(data.ResponseCode=="WP1022"){
						var searchData=data.Apps;
						wp_i_want_to.render([],maxDataTmpl,maxPageTmpl);
						$('#iwantto_search_zero_result').hide();
						$('#iwant_to_search_result_keywords').text($('#iwant_to_search_keywords_input').val());
						$('#iwant_to_search_result_count').text(searchData.length);
						$('#iwant_to_search_result_view').show();
						wp_i_want_to.render(iwantto_handel_style_of_datasource(searchData,"max"),maxDataTmpl,maxPageTmpl);
						$('.wp_iwantto_highlight').highlight($.trim($('#iwant_to_search_keywords_input').val()));
					}else if(data.ResponseCode=="WP2021"){
						$('#iwant_to_search_result_keywords').text($('#iwant_to_search_keywords_input').val());
						$('#iwant_to_search_result_count').text(0);
						$('#iwant_to_search_result_view').show();
						wp_i_want_to.render([],maxDataTmpl,maxPageTmpl);
						$('#iwantto_search_zero_result').text("No results for "+$.trim($('#iwant_to_search_keywords_input').val())+".");
						$('#iwantto_search_zero_result').show();
						$('.wp_iwantto_highlight').highlight($.trim($('#iwant_to_search_keywords_input').val()));
					}else{
						Workport.utils.alertMsg(alert_title,data.ResponseMessage,function(_data){});
					}
				}else{
					Workport.utils.alertMsg(alert_title,"I wanto search response is null.",function(_data){});
				}				
			}

			//get home apps list callback funtion
			function iwanto_get_home_apps_list_callback(data,httpCode){
				if(data.ResponseCode=="WP1022"){
					isEndHome=data.IsEnd;
					if(homeAPPsOffset==0){
			  			wp_i_want_to.render(iwantto_handel_style_of_datasource(data.Apps,"min"),minDataTmpl,minPageTmpl);
			  			oldhomeAppsList=data.Apps;
			  			if(data.Apps.length<minStartCount){
			  				homeAPPsOffset=0;
			  				allNewAppsStartCount=minStartCount;
			  			}else{
			  				homeAPPsOffset+=minStartCount;
			  				allNewAppsStartCount=allNewOffset;
			  			}
			  		}else{
			  			var oldCount=oldhomeAppsList.length;
		  				newHomeAppsList=oldhomeAppsList.concat(data.Apps);
	  					homeAPPsOffset+=data.Apps.length;
	  					oldhomeAppsList=newHomeAppsList;
		  				wp_i_want_to.render(iwantto_handel_style_of_datasource(data.Apps,"newmin",oldCount),minDataTmpl,minPageTmpl);
			  		}
				}else if(data.ResponseCode=="WP2021"){
					if(homeAPPsOffset==0){
						$("#iwantto_tooltip_img").show();
                        $("#iwantto_title").removeClass('panel_title_class2');
                        $("#iwantto_title").addClass('panel_title_class1');
                        setTimeout(function(){
                        	$("#iwantto_tooltip_img").hide();
                        },2000)                     
					}
				}else{
					Workport.utils.alertMsg(alert_title,data.ResponseMessage,function(_data){});
				}
				if(isFirstLoad){
	  				setAppCount();
	  				isFirstLoad=false;
			  	}
				loading.hide();
			}

			// get all apps list callback funtion
			function iwanto_get_all_apps_list_callback(data,httpCode){
				$("#iwantto_max_panel_zero_result").hide();
				if(data.ResponseCode=="WP1022"){
					isEndAll=data.IsEnd;
					if(allAPPSOffset==0){
			  			wp_i_want_to.render(iwantto_handel_style_of_datasource(data.Apps,"max"),maxDataTmpl,maxPageTmpl);
			  			oldAllAppList=data.Apps;
			  			if(data.Apps.length<maxStartCount){
			  				allAPPSOffset=0;
			  				allNewAppsStartCount=maxStartCount;
			  			}else{
			  				allAPPSOffset+=maxStartCount;
			  				allNewAppsStartCount=allNewOffset;
			  			}
			  		}else{
			  			var oldCount=oldAllAppList.length;
		  				newALLAppList=oldAllAppList.concat(data.Apps);
	  					allAPPSOffset+=data.Apps.length;
	  					oldAllAppList=newALLAppList;
		  				wp_i_want_to.render(iwantto_handel_style_of_datasource(data.Apps,"newmax",oldCount),maxDataTmpl,maxPageTmpl);
			  		}
			  		//short description text
					$(".iwantto_app_content_div").each(function(i){
					    var $p = $("p", $(this)).eq(0);
					    while ($p.outerHeight() > 24) {
					        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
					    };
					});

				}else if(data.ResponseCode=="WP2021"){
					if(allAPPSOffset==0){
						//Workport.utils.alertMsg(alert_title,data.ResponseMessage,function(_data){});
						if(!$("#iwantto_max_panel_zero_result")){
							$("#iwantto_max_panel_div").append('<span id="iwantto_max_panel_zero_result">There are no apps available.</div>');
						}
						$("#iwantto_max_panel_zero_result").show();
					}
				}else{
					Workport.utils.alertMsg(alert_title,data.ResponseMessage,function(_data){});
				}
				loading.hide();
			}

			//-------------------------------------API function
			//Get Home App List
			function iwant_to_get_home_app_list(data,callback){
				Workport.WantAPI.homeApps(callback,data);
			}

			//get all app list
			function iwant_to_get_all_app_list(data,callback){
				Workport.WantAPI.allApps(callback,data);
			}
			return {

				get_iwanto_zoomin_cb:function(){
					 minPageTmpl.hide();
					 minPageTmpl.empty();
					 maxPageTmpl.show();
					 allAPPSOffset = 0 ;
					 homeAPPsOffset=0;
					 if(useragent != 'ipad'){
					 	$('#iwantto_min_panel_div').slimScroll({ scrollTo: '-500px',disableFadeOut:true });
					 }
					 iwantto_zoomin_cb();

				},
				get_iwanto_zoomout_cb:function(){
					 maxPageTmpl.hide();
					 maxPageTmpl.empty();
					 minPageTmpl.show();
					 allAPPSOffset = 0 ;
					 homeAPPsOffset=0;
					 if(useragent != 'ipad'){
					 	$('#iwantto_max_panel_div').slimScroll({ scrollTo: '-500px',disableFadeOut:true });
					 }
					 iwantto_zoomout_cb();
				},
				getNewAllAppsList:function(){
					var data={ offset: allAPPSOffset, count: allNewAppsStartCount, orderBy:"Dummy String",filterBy:"Dummy String",mode:"Limited"};
					iwant_to_get_all_app_list(data,iwanto_get_all_apps_list_callback);
				},
				getNewHomeAppsList:function(){
					var data={ offset: homeAPPsOffset, count: allNewAppsStartCount, orderBy:"Dummy String",filterBy:"Dummy String",mode:"Limited"};
					iwant_to_get_home_app_list(data,iwanto_get_home_apps_list_callback);
				},
				refreshMinData:function(data){
					wp_i_want_to.render(iwantto_handel_style_of_datasource(data,"min"),minDataTmpl,minPageTmpl);
				},
				refreshMaxData:function(data){
					wp_i_want_to.render(iwantto_handel_style_of_datasource(data,"max"),maxDataTmpl,maxPageTmpl);
				},
				clickAllinMax:function(){
					allAPPSOffset = 0 ;
					homeAPPsOffset=0;
					var data={ offset: 0, count:maxStartCount, orderBy:"Dummy String",filterBy:"Dummy String",mode:"Limited"};
					iwant_to_get_all_app_list(data,iwanto_get_all_apps_list_callback);
				},
				clickAllinMin:function(){
					allAPPSOffset = 0 ;
					homeAPPsOffset=0;
					var iwant_to_get_home_apps_url_data={ offset: 0, count: minStartCount, orderBy:"Dummy String",filterBy:"Dummy String",mode:"Limited"};
					iwant_to_get_home_app_list(iwant_to_get_home_apps_url_data,iwanto_get_home_apps_list_callback);
				},
				setLetter:function(letter){
					letterSearchTool=letter;
				},
				getHomeEndFlag:function(){
					return isEndHome;
				},
				geAllEndFlag:function(){
					return isEndAll;
				},

				//-------------------------------------event--------------------------------
				clickIwanttoIcon:function(element,appid,event){
					$(".iwant_to_app_menu").empty();
		      		$(".iwant_to_app_menu").hide();
		      		var menuElement=$(element).parent().find(".iwant_to_app_menu");
		      		var index=$(element).parent().index();
		      		if(index%3==2){
		      			menuElement.css("x","-60px");
		      		}
		      		if(menuElement.is(":visible")){
		      			menuElement.empty();
						menuElement.hide();
						event.cancelBubble = true;
		      		}else{
		      			Workport.WantAPI.getTabs(function(data,httpCode){
			      			if(data.Apps&&data.Apps.length>0){
			      				menuElement.show();
			      				var menu=$(menuElement).kendoMenu({
			      					hoverDelay:200
			      				}).data('kendoMenu');
			      				var applist=data.Apps;
                                var arr = new Array();
			      				for(var i=0;i<applist.length;i++){
			      					menu.append({text: applist[i].Title});
                                    arr.push(applist[i].TabId);
			      				}
                                $(menuElement).find("li").each(function(index,element){
                                    $(element).find("span").attr("id","applist_"+arr[index]);
                                });
			      				$(menuElement).find("li").each(function(index,element){
    								var oldtitle=$(element).find("span").text();
    								var newTitle;
    								if(oldtitle.length>20){
										newTitle=oldtitle.slice(0,20);
										newTitle=newTitle+"...";
										$(element).find("span").text(newTitle);
										$(element).find("span").attr("title",oldtitle);
    								}
    								
  								});
			      				menuElement.append("<div style='clear:both;visibility:hidden;'></div>");
			      				menu.bind("select", function(e) {
	     							var index=$(e.item).index();
	     							var app=applist[index];
	     							iwanto_app_detail_title=app.Title;
							    	if(app.Url&&app.Url!=""){
										wp_iframe_win.openIframWindow(app.Url,app.Title);
							    	}else{
							    		Workport.utils.alertMsg(alert_title,"Url is NULL.",function(_data){});
							    	}
	     						});
							}else{
								Workport.utils.alertMsg(alert_title,data.ResponseMessage,function(_data){});
							}
		      			},{appId:appid});
		      		}
				},
				clickExtendIcon:function(element,AppId){
			    	$(".iwant_to_app_extend_menu").empty();
		      		$(".iwant_to_app_extend_menu").hide();
		      		var menuElement=$(element).parent().parent().find(".iwant_to_app_extend_menu");
		      		if(menuElement.is(":visible")){
		      			menuElement.empty();
						menuElement.hide();
		      		}else{
		      			Workport.WantAPI.getTabs(function(data,httpCode){
			      			if(data.Apps&&data.Apps.length>0){
			      				menuElement.show();
			      				var menu=$(menuElement).kendoMenu({
			      					hoverDelay:200
			      				}).data('kendoMenu');
			      				var applist=data.Apps;
                                var arr = new Array();
			      				for(var i=0;i<applist.length;i++){
			      					menu.append({text: applist[i].Title},getItem('i', menuElement));
                                    arr.push(applist[i].TabId);
			      				}
                                $(menuElement).find("li").each(function(index,element){
                                    $(element).find("span").attr("id","appExtendList_"+arr[index]);
                                });
			      				$(menuElement).find("li").each(function(index,element){
    								var oldtitle=$(element).find("span").text();
    								var newTitle;
    								if(oldtitle.length>20){
										newTitle=oldtitle.slice(0,20);
										newTitle=newTitle+"...";
										$(element).find("span").text(newTitle);
										$(element).find("span").attr("title",oldtitle);
    								}
    								
  								});
			      				menuElement.append("<div style='clear:both;visibility:hidden;'></div>");
			      				menu.bind("select", function(e) {
	     							var index=$(e.item).index();
	     							var app=applist[index];
	     							iwanto_app_detail_title=app.Title;
							    	if(app.Url&&app.Url!=""){
										wp_iframe_win.openIframWindow(app.Url,app.Title);
							    	}else{
							    		Workport.utils.alertMsg(alert_title,"Url is NULL.",function(_data){});
							    	}
	     						});
							}else{
								Workport.utils.alertMsg(alert_title,data.ResponseMessage,function(_data){});
							}
		      			},{appId:AppId});
		      		}
			    },
			    clickBookMark:function(element,AppId){
			    	Workport.WantAPI.addFavourite(function(data,httpCode){
							if(data.ResponseCode=="WP1022"){
								if(data.Isfavourite){
									$(element).removeClass("main_smartstream_ac_8_8");
									$(element).addClass("main_smartstream_ab_8_8");
								}else{
									$(element).removeClass("main_smartstream_ab_8_8");
									$(element).addClass("main_smartstream_ac_8_8");
								}
					  			if(oldAllAppList&&oldAllAppList.length>0){
					  				for(var i=0;i<oldAllAppList.length;i++){
					  					if(oldAllAppList[i].AppId==AppId){
					  						oldAllAppList[i].IsBookmarked=data.Isfavourite;
					  						break;
					  					}
					  				}
					  			}
					  		}else{
					  			Workport.utils.alertMsg(alert_title,data.ResponseMessage,function(_data){});
					  		}
					},{appId:AppId});
			    },
			    clickAppTab:function(title,url){
			    	iwanto_app_detail_title=title;
			    	if(url&&url!=""){
						wp_iframe_win.openIframWindow(url,title);
			    	}else{
			    		Workport.utils.alertMsg(alert_title,"Url is NULL.",function(_data){});
			    	}
			    },
			   enterSearchBtn:function(event){
			   		    var keycode
					    if(window.event) // IE 
					    {
					        keycode = event.keyCode
					    }
					    else if(event.which) // Netscape/Firefox/Opera
					    {
					        keycode = event.which
					    }
					    if(keycode==13) //Enter key
					    {
					        /*var contenttxt=$('#iwant_to_search_keywords_input').val();
							if($.trim(contenttxt)==''){
								$("#iwant_to_search_keywords_input").kendoTooltip({
									content: 'Please input the keywords.' ,
									position: "right",
									showOn: false,
									show: function() {
        								isShowSreachKeywordsNull=true;
      								},
      								hide: function() {
        								isShowSreachKeywordsNull=false;
      								}
								});
								if(!isShowSreachKeywordsNull){
									$("#iwant_to_search_keywords_input").data('kendoTooltip').show();
								}
							}else{
								var reqdata={offset:0,count:maxStartCount,key:encodeURI($.trim($('#iwant_to_search_keywords_input').val())),mode:"Contains"};
								Workport.WantAPI.searchApp(iwantto_SearchAppsAPICallBack,reqdata);
							}*/
                            this.clickSearchIcon();
					    }
			    },
			    clickSearchIcon:function(){
					// maxPageTmpl.off("*");
	    //             maxPageTmpl.empty();
			    	$("#iwantto_max_panel_zero_result").hide();
			    	var contenttxt=$('#iwant_to_search_keywords_input').val();
					if($.trim(contenttxt)==''){
						$("#iwant_to_search_keywords_input").kendoTooltip({
							content: 'Please input the keywords.' ,
							position: "right",
							showOn: false,
							show: function() {
								isShowSreachKeywordsNull=true;
								},
								hide: function() {
								isShowSreachKeywordsNull=false;
								}
						});
						if(!isShowSreachKeywordsNull){
							$("#iwant_to_search_keywords_input").data('kendoTooltip').show();
						}
						$("#iwant_to_search_keywords_input").on('input',function(e){
			    	   		$("#iwant_to_search_keywords_input").data('kendoTooltip').hide();  
						}); 
					}else{
						wp_i_want_to.showLoading(loading,$('#iwanto_panel'),false,false);
                        var searchKey = $.param({key:$.trim($('#iwant_to_search_keywords_input').val())}).substring(4);
						var reqdata={offset:0,count:maxStartCount,key:searchKey,mode:"Contains"};
						Workport.WantAPI.searchApp(iwantto_SearchAppsAPICallBack,reqdata);
					}
			    },
			    clickBackToAll:function(){
			    	iwant_to_closeSearchPanel();
			    	wp_i_want_to.render([],maxDataTmpl,maxPageTmpl);
			    	wp_iwant_to_enlargeIwantoPanel();

			    },

			    onMenuMouseLeave:function(element){		
					$(element).empty();
					$(element).hide();
				},
				onOpenOrCloseSearchPanel:function(){		
					$('#iwantto_search_zero_result').hide();
					if($('#iwanto').width()==256){
						$('#iwantto_panel_resize_icon').click();
					}
					$("#iwant_to_search_keywords_input").val("");
					$("#iwant_to_search_view").toggle();
					$('#iwant_to_app_no_alpha_result').hide();
				},


				//---------------------------------------event end----------------------------

				//------------------------------init function---------------------------------
				init:function(){
					$('#i_want_to_alpa_search').height(Workport.utils.getViewPort().height-100);
					// $('#iwanto_panel').appendTo('#iwanto');
					$('#iwanto').html($('#iwanto_panel'));
					minPageTmpl.off("*");
                	minPageTmpl.empty();
					if(!loading){loading = new Workport.Loader($('#iwanto_panel'));}					
					wp_i_want_to.showLoading(loading,$('#iwanto_panel'),false);
					var iwant_to_get_home_apps_url_data={ offset: 0, count: minStartCount, orderBy:"Dummy String",filterBy:"Dummy String",mode:"Limited"};
					iwant_to_get_home_app_list(iwant_to_get_home_apps_url_data,iwanto_get_home_apps_list_callback);

					var self = this;
					var width = $(window).width();
					var height = Screen.bodyHeight;
					$('.iwant_panel_div').css({
						width:"256",
						height:"100%"
					});
					iwant_to_closeSearchPanel();
					if(useragent == 'ipad'){
						$('#iwantto_max_panel_div').hide();
						$('#iwantto_max_panel_div').css('height',(height-60)+'px');
						$('#iwantto_max_panel_div').css('overflow-y','scroll');
						$('#iwantto_min_panel_div').css('height',(height-60)+'px');
						$('#iwantto_min_panel_div').css('overflow-y','scroll');

						$("#iwantto_min_panel_div").bind("scroll",function(){
	                        if(($("#iwantto_min_panel_div")[0].scrollHeight <= $("#iwantto_min_panel_div")[0].scrollTop + $("#iwantto_min_panel_div").height()) &&!self.getHomeEndFlag()){ // bottom
	                            wp_i_want_to.showLoading(loading,$('#iwantto_min_panel_div'),false);
			 					self.getNewHomeAppsList();
	                        }
	                    }); 

						$("#iwantto_max_panel_div").bind("scroll",function(){
	                        if(($("#iwantto_max_panel_div")[0].scrollHeight <= $("#iwantto_max_panel_div")[0].scrollTop + $("#iwantto_max_panel_div").height()) &&!self.geAllEndFlag()){ // bottom
	                            wp_i_want_to.showLoading(loading,$('#iwantto_max_panel_div'),false);
			 					self.getNewAllAppsList();
	                        }
	                    }); 
					} else {
								$('#iwantto_max_panel_div').slimScroll({
								 		height: (height-60)+'px',
										disableFadeOut:true,
								 		width:'768px'
								});
								$('#iwantto_min_panel_div').slimScroll({
									 		height: (height-60)+'px',
											disableFadeOut:true
								});

								$('#iwantto_min_panel_div').slimScroll().bind('slimscroll', function(e, pos){
						 				if(pos=="bottom"&&!self.getHomeEndFlag()){
											wp_i_want_to.showLoading(loading,$('#iwantto_min_panel_div'),false);
						 					self.getNewHomeAppsList();
						 				}
								});

								$('#iwantto_max_panel_div').slimScroll().bind('slimscroll', function(e, pos){
						 				if(pos=="bottom"&&!self.geAllEndFlag()){
											wp_i_want_to.showLoading(loading,$('#iwantto_max_panel_div'),false);
						 					self.getNewAllAppsList();
						 				}
								});
									$("#iwantto_max_panel_div").parent().hide();
						    }
			        HomePage_Scrollable.registerZoomCallback(0, self.get_iwanto_zoomin_cb, self.get_iwanto_zoomout_cb);
					$('#iwantto_panel_resize_icon').bind({
						click:function(e){
			                HomePage_Scrollable.zoom(0);
			                return;
						}
					});
					
					var wp_iwanto_letter=Letter('#i_want_to_alpa_search',function(_letter){
						$("#iwant_to_search_view").hide();
			    	    var reqdata;
						if(_letter=="#"){
							reqdata={ offset: 0, count: 10,key:"others",mode:"StartsWith",orderBy:"Dummy String"};
						}else{
							reqdata={ offset: 0, count: 10,key:_letter,mode:"StartsWith",orderBy:"Dummy String"};
						}
			    	    if($('#iwanto').width()==256){
							wp_i_want_to.showLoading(loading,$('#iwantto_min_panel_div'),false);
			    	    	if(_letter=="All"){
			    	    		self.render([],minDataTmpl,minPageTmpl);
			    	    		self.clickAllinMin();
			    	    		if(useragent != 'ipad'){
			    	    			$('#iwantto_min_panel_div').slimScroll({ scrollTo: '-500px',disableFadeOut:true });
			    	    		}
			    	    		$('#iwant_to_app_no_alpha_result').hide();
			    	    	}else{
			    	    		Workport.WantAPI.searchHomeApp(function(searchData,searchHttpCode){
									loading.hide();
				        	    	if(searchData.ResponseCode=="WP1022"){
				        	    		$('#iwant_to_app_no_alpha_result').hide();
				        	    		self.render([],minDataTmpl,minPageTmpl);
				        	    		self.refreshMinData(searchData.Apps);
				        	    	}else if(searchData.ResponseCode=="WP2021"){
				        	    		self.render([],minDataTmpl,minPageTmpl);
				        	    		$('#iwant_to_app_no_alpha_result').text("No apps found starting with "+_letter);
			        	    			$('#iwant_to_app_no_alpha_result').css("left",18);
			        	    			$('#iwant_to_app_no_alpha_result').show();
				        	    	}else{
				        	    		Workport.utils.alertMsg("Error Message",searchData.ResponseMessage,function(_data){});
				        	    	}
			        	    	},reqdata);
			    	    	}
			    	    }else{
							wp_i_want_to.showLoading(loading,$('#iwantto_max_panel_div'),false);
			    	    	if(_letter=="All"){
			    	    		self.render([],maxDataTmpl,maxPageTmpl);
			    	    		self.clickAllinMax();
			    	    		if(useragent != 'ipad'){
			    	    			$('#iwantto_max_panel_div').slimScroll({ scrollTo: '-500px',disableFadeOut:true });
			    	    		}
			    	    		$('#iwant_to_app_no_alpha_result').hide();
			    	    	}else{
			    	    		Workport.WantAPI.searchApp(function(searchData,searchHttpCode){
									loading.hide();
				        	    	if(searchData.ResponseCode=="WP1022"){
				        	    		self.render([],maxDataTmpl,maxPageTmpl);
				        	    		self.refreshMaxData(searchData.Apps);
				        	    		$('#iwant_to_app_no_alpha_result').hide();
				        	    	}else if(searchData.ResponseCode=="WP2021"){
				        	    		self.render([],maxDataTmpl,maxPageTmpl);
				        	    		$('#iwant_to_app_no_alpha_result').text("No apps found starting with "+_letter);
			        	    			$('#iwant_to_app_no_alpha_result').css("left",279);
			        	    			$('#iwant_to_app_no_alpha_result').show();
				        	    	}else{
										Workport.utils.alertMsg("Error Message",searchData.ResponseMessage,function(_data){});
				        	    	}
			        	    	},reqdata);
			    	    	}
			    	    }
					}, '#2d9bb3');
					letterSearchTool=wp_iwanto_letter;
				},

				render: function(_data,dataTmpl,pageTmpl) {
	            	if(_data.length==0){
	            		pageTmpl.off("*");
	                    pageTmpl.empty();
	            	}else{
	            		var tmpl = kendo.template($.trim(dataTmpl.html()));
		                var arr = new Array();
		                $.map(_data, function(_elem) {
		                    arr.push(tmpl(_elem));
		                });
		                $(arr.join('')).appendTo(pageTmpl);
	            	}
            	},
				showLoading: function(loader,element,isDown,isWhitePage){
					if(loader){
						if(isDown){
							loader.setContent(element,{
													position:'down',
													imgColor:isWhitePage?'black':'white',
													textCSS:{'display':'none','color':isWhitePage?'black':'white'}
							});
						}else{
							loader.setContent(element,{
										position:'center',
										imgColor:isWhitePage?'black':'white',
										textCSS:{'display':'inline','color':isWhitePage?'black':'white'}
							});
						}
						loader.show();
					}
				}

				//------------------------------init function end
				

			};

     })();

	function iwanttoResize (){
		var height = $(window).height() - 110;
		$('#i_want_to_alpa_search').height(height);
		$('#iwantto_min_panel_div').height(height);
		$('#iwantto_max_panel_div').height(height);
		
		$('#iwant_panel_div').find('.slimScrollDiv').height(height);
	}
	$(window).resize(iwanttoResize);
    wp_i_want_to.init();
	

</script>

